<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>
<div id="head_search_html">
    <iframe id="head_search" src="head_search.html" frameborder="0"></iframe>
</div>
<div class="tabRight">
    <div class="first">
        <ul>
            <li><a target="_blank" class="icon_admin_white" title=""></a></li>
            <li>
                <a target="_blank" class="go-shopcard">
                    <i class="icon_shopcar_white"></i>
                    <p class="mt10">购<br>物<br>车</p>
                    <span class="car-num pos-Sty1">0</span>
                </a>
            </li>
            <li>
                <a target="_blank" class="icon_list_white mt10 go-myorder" title="订单"></a>
                <a target="_blank" class="icon_collect_white mt10 go-myhas" title="收藏"></a>
                <a target="_blank" class="icon_history_white mt10 go-record" title="记录"></a>
            </li>
        </ul>
    </div>
    <div class="second">
        <a target="_blank" class="icon_edit_white"></a>
        <a target="_blank" class="icon_top_white mt10"></a>
    </div>
</div>
<div class="shop_car container layui-form" v-cloak="">
    <h2>填写并核对订单信息</h2>
    <div class="content">
        <div class="title">收货人信息 <span class="add_adress">添加地址</span><span class="hide_adress">返回</span></div>
        <div class="adress_box">
            <ul>
                <li class="adress" v-for="item in adressList">
                    <i class="icon_radio" :value="item.id"></i>{{item.name}} {{item.area}} {{item.address}} {{item.phone}}
                    <div class="button_box">
                        <span @click="editAdress(item.id)">[修改]</span>
                        <span @click="delAdress(item.id)">[删除]</span>
                    </div>
                </li>
            </ul>
            <ul class="add_box">
                <li class="top">添加新地址</li>
                <li class="add">
                    <table>
                        <tr>
                            <td><i class="c_red">* </i>收货人：</td>
                            <td><input class="layui-input" type="text" id="name" :value="adressInfo.name"></td>
                        </tr>
                        <tr>
                            <td><i class="c_red">* </i>所在地区：</td>
                            <td>
                                <div class="areaSelect">
                                    <select name="province" id="province" lay-filter="province">
                                        <option value="">省</option>
                                    </select>
                                    <select name="city" id="city" lay-filter="city">
                                        <option value="">市</option>
                                    </select>
                                    <select name="area" id="area" lay-filter="myselect3">
                                        <option value="">区</option>
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="c_red">* </i>详情地址：</td>
                            <td><input class="layui-input" type="text" id="address" :value="adressInfo.address"></td>
                        </tr>
                        <tr>
                            <td><i class="c_red">* </i>电话：</td>
                            <td><input class="layui-input" type="text" id="phone" :value="adressInfo.phone"></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="submit" @click="submitAdress">保存收货人信息</div>
                            </td>
                        </tr>
                    </table>
                </li>
            </ul>
        </div>
        <div class="title">支付及配送方式</div>
        <div class="pay">
            <p>快递运输 由商家选择合作快递为您配送</p>
            <p>在线支付</p>
            <div class="choose_pays">
                <ul>
                    <li>
                        <i class="icon_radio active" value="1"></i>
                        <div class="aliPay">支付宝支付</div>
                    </li>
                    <!--<li>-->
                        <!--<i class="icon_radio" value="2"></i>-->
                        <!--<img src="../img/sends/send_05.png" alt=""/>-->
                    <!--</li>-->
                </ul>
            </div>
        </div>
        <div class="title">商品清单</div>
        <div class="list">
            <table>
                <thead>
                <td>商品</td>
                <td>单价</td>
                <td>数量</td>
                </thead>
                <tbody v-if="productid">
                <tr>
                    <td colspan="4">
                        <i class="icon_store"></i>
                        {{storeInfo.name}}
                    </td>
                </tr>
                <tr class="thing">
                    <td>
                        <img v-for="(item,index) in productInfo.picUrl" v-if="index == 0" :src="imgBaseUrl + item" alt="" class="marl_10">
                        <span>{{productInfo.name}}</span>
                    </td>
                    <td class="price">¥ {{productInfo.price}}</td>
                    <td>
                        <span>{{num}}</span>
                    </td>
                </tr>
                <tr class="remark">
                    <td colspan="4">
                        备注 <input type="text">
                    </td>
                </tr>
                <tr class="total_box">
                    <td colspan="4">
                        <div class="submit" @click="addOrder">去结算</div>
                        <div class="total">总计（不含运费）：<span class="c_red">¥ {{num*productInfo.price}}</span></div>
                    </td>
                </tr>
                </tbody>
                <tbody v-else>
                <tr>
                    <td colspan="4">
                        <i class="icon_store"></i>
                        {{storeName}}
                    </td>
                </tr>
                <tr class="thing" v-for="item in carList">
                    <td>
                        <img v-for="(it,index) in item.picUrl" v-if="index == 0" :src="imgBaseUrl + it" alt="" class="marl_10">
                        <span>{{item.name}}</span>
                    </td>
                    <td class="price">¥ {{item.price}}</td>
                    <td>
                        <span>{{item.count}}</span>
                    </td>
                </tr>
                <tr class="remark">
                    <td colspan="4">
                        备注 <input type="text">
                    </td>
                </tr>
                <tr class="total_box">
                    <td colspan="4">
                        <div class="submit" @click="addShoppingOrder">去结算</div>
                        <div class="total">总计（不含运费）：<span class="c_red">¥ {{totalPrice}}</span></div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="footer_01">
    <div class="container clearfix">
        <ul>
            <li>
                <img src="../img/footer_01.png" alt="">
                <div class="box">
                    <span>质量保障</span><br>
                    <i>正规渠道，质量保障</i>
                </div>
            </li>
            <li>
                <img src="../img/footer_02.png" alt="">
                <div class="box">
                    <span>品类齐全</span><br>
                    <i>各大车系千万配件，一站购齐</i>
                </div>
            </li>
            <li>
                <img src="../img/footer_03.png" alt="">
                <div class="box">
                    <span>全网低价</span><br>
                    <i>源头直达，价格大幅优于传统渠道</i>
                </div>
            </li>
            <li>
                <img src="../img/footer_04.png" alt="">
                <div class="box">
                    <span>售后无忧</span><br>
                    <i>安心选购，品牌保障，售后无忧</i>
                </div>
            </li>
        </ul>
    </div>
</div>
<script src="../js/config.js"></script>
<script>
    initAreaSelect();
    var limit = 10;
    var offset = 1;
    var count;
    var productid = getUrlParam("productid");
    var num = getUrlParam("num");
    var commodityIds = getUrlParam("commodityIds")?getUrlParam("commodityIds").split(","):"";

    //选择地址
    $("body").on("click", ".adress_box li .icon_radio", function () {
        $(this).addClass("active").parent().siblings().find(".icon_radio").removeClass("active");
    });
    $("body").on("click", ".shop_car .content .title .add_adress,.shop_car .content .title .hide_adress", function () {
        app.adressId = '';
        $(".shop_car .content .adress_box .add_box .top").text("添加新地址");
        $(".shop_car .content .adress_box .add_box").toggle().siblings().toggle();
        $(this).hide().siblings().show();
    });

    //支付方式
    $("body").on("click", ".choose_pays li ", function () {
        $(".choose_pays li .icon_radio").removeClass("active");
        $(this).find(".icon_radio").addClass("active");
    });

    var app = new Vue({
        el: '.shop_car',
        data: {
            imgBaseUrl: imgBaseUrl,
            adressList: [],
            adressId: '',
            adressInfo: '',
            productid: productid,
            productInfo: "",
            num:num,
            storeInfo:"",
            carList:"",
            commodityIds:commodityIds,
            storeName:'',
        },
        beforeCreate: function () {
            var that = this;
            getAdress()
        },
        updated: function () {

        },
        created: function () {
            var that = this;
            if (productid) {
                get_ajax("/sys/storeCommodity/view", {id: productid}, function (data) {
                    data.picUrl = data.picUrl.split(",");
                    that.productInfo = data;
                    if(that.productInfo.storeId){
                        get_ajax("/sys/store/view", {id: that.productInfo.storeId}, function (data) {
                            that.storeInfo = data;
                            console.log(that.storeInfo)
                        })

                    }else{

                    }
                })
            }else{
                get_ajax("/sys/car/getCarList", {}, function (data) {
                    var list = [];
                    data.forEach(function (items) {
                        items.list.forEach(function (item) {
                            item.picUrl = item.picUrl.split(",");
                            commodityIds.indexOf(item.commodityId) != -1?list.push(item):"";
                            that.storeName = item.storeName;
                        })
                    })
                    that.carList = list;
                })
            }
        },
        computed:{
            totalPrice:function () {
                var price = 0;
                if(this.carList.length>0){
                    this.carList.forEach(function (item) {
                        price += (item.price * item.count)
                    })
                }
                return price
            }
        },
        methods: {
            editAdress: function (id) {
                this.adressId = id;
                $(".shop_car .content .adress_box .add_box .top").text("编辑地址");
                $(".shop_car .content .adress_box .add_box,.shop_car .content .title .add_adress").toggle().siblings().toggle();
                get_ajax("/sys/shippingAddress/findInfoById", {id: id}, function (data) {
                    app.adressInfo = data;
                    initLayuiArea(data.province,data.city,data.district)
                })
            },
            delAdress: function (id) {
                get_confirm("确认删除地址吗？", function () {
                    get_ajax("/sys/shippingAddress/delById", {id: id}, function (data) {
                        layer.msg("删除地址成功");
                        getAdress();
                    })
                })
            },
            submitAdress: function () {
                var name = $("#name").val();
                var phone = $("#phone").val();
                var province = $("#province").val();
                var city = $("#city").val();
                var district = $("#area").val();
                var address = $("#address").val();
                var url;
                var msg;
                var sendData = {
                    name: name,
                    phone: phone,
                    province: province,
                    city: city,
                    district: district,
                    address: address,
                };
                for (var item in sendData) {
                    if (!sendData[item]) {
                        layer.msg("请完善信息！");
                        return
                    }
                }
                if (!phone_rexg.test(phone)) {
                    layer.msg("手机号码错误！");
                    return
                }
                if(app.adressId){
                    url = "/sys/shippingAddress/editShippingAddress";
                    msg = "编辑地址成功";
                    sendData['id'] = app.adressId;
                }else {
                    url = "/sys/shippingAddress/saveShippingAddress";
                    msg = "新增地址成功"
                }
                get_ajax(url, sendData, function (data) {
                    layer.msg(msg);
                    $("#name,#phone,#address,#province,#city,#area").val("");
                    getAdress();
                    $(".shop_car .content .adress_box .add_box,.title .hide_adress").hide().siblings().show();
                })
            },
            addOrder:function () {
                var addressId = $(".adress_box li .icon_radio.active").attr("value");
                var payType = $(".choose_pays li .icon_radio.active").attr("value");
                var remark = $(".remark input").val();
                var sendData = {
                    commodityId:productid,
                    count:num,
                    addressId:addressId,
                    payType:payType,
                    remark:remark
                }
                if(!addressId){
                    layer.msg("请选择收货地址！")
                    return
                }
                if(!payType){
                    layer.msg("请选择支付方式！")
                    return
                }
                get_ajax("/sys/order/addOrder",sendData,function (data) {
                    var id = data;
                    get_confirm("下单成功，确认立即支付！",function () {
                        window.open("pay.html?id="+id)
                    })
                })
            },
            addShoppingOrder:function () {
                var addressId = $(".adress_box li .icon_radio.active").attr("value");
                var payType = $(".choose_pays li .icon_radio.active").attr("value");
                var remark = $(".remark input").val();
                var sendData = {
                    commodityIds:commodityIds.toString(),
                    addressId:addressId,
                    payType:payType,
                    remark:remark
                }
                if(!addressId){
                    layer.msg("请选择收货地址！")
                    return
                }
                if(!payType){
                    layer.msg("请选择支付方式！")
                    return
                }
                get_ajax("/sys/order/addShoppingOrder",sendData,function (data) {
                    var id = data;
                    get_confirm("下单成功，确认立即支付！",function () {
                        window.open("pay.html?id="+id)
                    })
                })
            }
        },
    })

    initForm()

    function getAdress() {
        get_ajax("/sys/shippingAddress/getMyAddressPage", {limit: limit, offset: offset}, function (data) {
            app.adressList = data;
        })
    }

</script>
</body>
</html>